<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form id="demo" action="http://39.108.121.57:8080/" method="post" @submit.prevent="handleSubmit">
			用户名: <input type="text" name="username" value="" v-model="username"/><br />
			
			密码: <input type="password" name="password" value="" v-model="password"/><br />
			
			性别: <input type="radio" value="男" name="gender"  v-model="gender"/>男  <input type="radio" value="女" name="gender" v-model="gender"/>女<br />
			
			爱好: <input type="checkbox" value="youyong" name="hobby" v-model="hobby"/>游泳
			<input type="checkbox" value="gouwu" name="hobby" v-model="hobby"/>购物
			<input type="checkbox" value="pashan" name="hobby" v-model="hobby"/>爬山
			<input type="checkbox" value="kandianying" name="hobby" v-model="hobby"/>看电影<br />
			
			城市: 
			<select v-model="cityId">
				<option name="city" :value="city.id"  v-for="(city, index)  in allCity" :key="index">{{city.name}}</option>
			</select><br />
			
			介绍: <textarea name="introduce" v-model="desc"></textarea><br />
			
			<input type="submit" value="提交" />
		</form>
		<script type="text/javascript" src="js/vue.js"></script>
		<script>
			new Vue({
				el: "#demo",
				data: {
					username: "",
					password: "",
					gender: "女",
					hobby: ["youyong", "kandianying"],
					allCity: [{id: 1, name: "北京"}, {id: 2, name: "上海"}, {id: 3, name: "深圳"}],
					cityId: 3,
					desc: "我是一个好学的程序猿"
				},
				methods:{
					handleSubmit(){
						console.log(this.username, this.password, this.gender, this.cityId, this.hobby, this.desc)
					}
				}
			})
		</script>
	</body>
</html>

